<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> 
<%@ include file="common/import.jsp"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

  </head>
  <script type="text/javascript">
	  $(document).ajaxError(function(event,xhr,options,exc){
		  if(xhr.status =='404'){
			  showWarnAlert("【404】请求资源不存在!");
			  closeCurrentTab();
		  }else if(xhr.status =='500'){
			  showWarnAlert("【500】系统内部错误!");
			  closeCurrentTab();
		  }
	  })
	 //在右边center区域打开菜单，新增tab
	function openUrlinTab(text,id,href) {
		var opts = {
					title : text,
					closable : true,
					href : href,
					id:id
					};	
		var t = $('#tabs');
		if (t.tabs('existsById', opts.id)) {//如果已经存在，则更新tab信息
			t.tabs('selectById', opts.id);
			var thistab =  $('#tabs').tabs('getSelected');
			t.tabs('update', {
				tab: thistab,
				options:opts
			});
		} else {
			t.tabs('add', opts);
		}
	}
	function logout(){
		ajaxRequest("logout");
		window.location.href = "";
	}
  	$(function(){
  		//开发模式
  		_DEV_MODE = ${_DEV_MODE};
  		
		//绑定tabs的右键菜单
		$("#tabs").tabs({
			onContextMenu : function(e,index) {
				e.preventDefault();
				$('#tabsMenu').menu('show', {
					left : e.pageX,
					top : e.pageY
				}).data("index", index);
			}
		});

		//实例化menu的onClick事件
		$("#tabsMenu").menu({
			onClick : function(item) {
				tabMenuClick(this, item.name);
			}
		});

		//几个关闭事件的实现(通过索引的方式关闭的，不会出现重复名字导致的问题)
		function tabMenuClick(menu, type) {
			var curTabIndex = $(menu).data("index");
			var tabs = $("#tabs");

			if (type === "close") {
				tabs.tabs("close", curTabIndex);
				return;
			}

			var allTabs = tabs.tabs("tabs");
			var len = allTabs.length;
			if ("All" == type) {
				  for( var i = 0; i < len; i++){
					  tabs.tabs("close", 0);
				  }
			 }else if("Other" == type){
				  for( var i = 0; i < len; i++) {
					   if(curTabIndex > i){
						   tabs.tabs("close", 0);
					   }else{
						   tabs.tabs("close", 1);
					   }
				  }
			  }else if("ShowRequest" == type&&_DEV_MODE){
				  var thistab =  $('#tabs').tabs('getSelected');
				  alert(thistab.panel('options').href);
			  }else if("ShowPath" == type&&_DEV_MODE){
				  alert(getObject("systemM_path").val());
			  }
		}
		//第一菜单的选中事件
		$("._nav>ul>li").click(function(){
			//所有的箭头都变为未选中
			$("._nav>ul>li>span").removeClass("_nav_arrow_click").addClass("_nav_arrow_notclick");
			//所有的二级导航都隐藏
			$("._nav>ul>li>ul").hide();
			//当前选中的箭头变为选中
			$(this).children("span").removeClass("_nav_arrow_notclick").addClass("_nav_arrow_click");
			//二级导航展示
			$(this).children("ul").show();
			//所有一级导航的颜色恢复默认
			$("._nav>ul>li>a").css("color","#4a4a4a");
			//所有一级导航字体恢复默认
			$("._nav>ul>li>a").css("font-weight","normal");
			//当前选中的导航颜色变蓝
			$(this).children("a").css("color","#0C88C2");
			//当前选中的导航字体加粗
			$(this).children("a").css("font-weight","bold");
		});
		//定义二级导航选中效果
		$(".nav_second>li").click(function(){
			//所有二级导航背景颜色置为白色
			$(".nav_second>li").css("background-color","white");
			////所有二级导航字体变为黑色
			$(".nav_second>li>a").css("color","black");
			//当前二级导航背景变为蓝色
			$(this).css("background-color","#38A3D5");
			//当前二级导航字体白色
			$(this).children("a").css("color","white");
		});
  	});
  	
  
  </script>
  <body class="easyui-layout">
	<div data-options="region:'north'" style="height:70px;background-color: #00B5AD;position: relative;">
		<img alt="" src="img/main_logo.png" height="100%" style="float: left;"> 
		<a href="#" class="easyui-menubutton theme-navigate-more-button"
			data-options="menu:'#more',hasDownArrow:false" style="position: absolute;right: 20px;bottom: 0px;"></a>
		<div id="more">
			<div>
				修改密码
			</div>
			<div>
				系统信息
			</div>
			<div onclick="logout()">
				退出
			</div>
		</div>
	</div>
	<div data-options="region:'south'" style="height:25px;text-align: center;">
		技术支持：<a href="Mailto:303902490@qq.com" style="text-align:center;line-height:23px;color: #333333;">小龙工作室</a>
	</div>
	<div data-options="region:'west',split:false,title:'功能菜单'"  style="width:200px;">
		<!--不知道触动了哪个js的哪个机关，菜单如果不加style="width:xx"在打开多个tab，然后全部关闭的时候会随机的出现菜单的混乱，所以此处加上了width,不够完美啊，呜呜  -->
		<div class="_nav">
			<c:forEach  items="${menudata}" var="item">
				<ul style="width: 100%">
					<li style="width: 100%">
						<span style="width: 9px;" class="_nav_arrow_notclick"></span>
						<a>${item.self.name}</a>
						<ul class="nav_second" style="margin-left: 5%;width: 95%;">
							<c:forEach  items="${item.children}" var="subitem">
								<li style="width: 100%">
									<span style="width: 12px;"></span>
									<a onclick="javascript:openUrlinTab('${subitem.name}','${subitem.functionid}','${subitem.url}')">${subitem.name}</a>
								</li>
							</c:forEach>
						</ul>
					</li>
				</ul>
			</c:forEach>
		</div>
	</div>
	<!-- 这个east暂时当做右边的边框用 -->
	<div data-options="region:'east'" style="width:1px;"></div>
	<div data-options="region:'center'" style="background-image: url('img/backgroud_main.jpg');background-repeat: no-repeat;background-position: center; ">
		<div class="easyui-tabs"  border="false" id="tabs" fit="true">
		</div>
	</div>
	    <!-- 自定义的右键菜单 -->
    <div id="tabsMenu" class="easyui-menu" style="width:120px;">
		<div name="close">关闭</div>
		<div name="Other">关闭其他</div>
		<div name="All">关闭所有</div>
		<c:if test="${_DEV_MODE}">
			<div name="ShowRequest">查看请求</div>
			<div name="ShowPath">查看路径</div>
		</c:if>
	</div>
</body>
</html>
